<template>
  <div class="mt-2">
    <!-- 景点详情 -->
    <div v-if="activity === '景点'" class="bg-white p-4 rounded-md shadow-sm">
      <h4 class="font-bold text-lg mb-2">{{ details.name }}</h4>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <p class="text-sm text-gray-600 mb-1">景点亮点</p>
          <div class="flex flex-wrap gap-2">
            <span
                v-for="(highlight, idx) in details.highlights"
                :key="idx"
                class="bg-green-50 text-green-700 px-2 py-1 rounded text-xs"
            >
              {{ highlight }}
            </span>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-1">其他信息</p>
          <p class="text-sm"><span class="font-medium">游玩时间:</span> {{ details.duration }}</p>
          <p class="text-sm"><span class="font-medium">门票:</span> {{ details.ticket }}</p>
          <p v-if="details.cable_car" class="text-sm">
            <span class="font-medium">缆车票:</span> {{ details.cable_car }}
          </p>
          <p v-if="details.boat_ticket" class="text-sm">
            <span class="font-medium">船票:</span> {{ details.boat_ticket }}
          </p>
        </div>
      </div>
    </div>

    <!-- 其他活动详情（有选项） -->
    <div v-else-if="details.options">
      <div class="flex mb-2">
        <button
            v-for="(_, idx) in details.options"
            :key="idx"
            :class="`py-1 px-3 text-sm rounded-t-md ${selectedOption === idx ? 'bg-white text-blue-600 font-medium' : 'bg-gray-100 text-gray-600'}`"
            @click="selectedOption = idx"
        >
          选项 {{ idx + 1 }}
        </button>
      </div>

      <div class="bg-white p-4 rounded-md shadow-sm">
        <!-- 火车详情 -->
        <div v-if="activity === '火车'">
          <div class="flex justify-between items-center mb-2">
            <div>
              <p class="font-medium">{{ details.options[selectedOption].train }}</p>
              <div class="flex items-center text-sm text-gray-600 mt-1">
                <span>{{ details.options[selectedOption].from }}</span>
                <i class="fas fa-chevron-right mx-1 text-xs"></i>
                <span>{{ details.options[selectedOption].to }}</span>
              </div>
            </div>
            <div class="text-right">
              <p class="font-medium text-red-600">{{ details.options[selectedOption].price }}</p>
            </div>
          </div>
        </div>

        <!-- 交通详情 -->
        <div v-else-if="activity === '交通'">
          <div class="flex justify-between items-center mb-2">
            <div>
              <p class="font-medium">{{ details.options[selectedOption].type }}</p>
              <div class="flex items-center text-sm text-gray-600 mt-1">
                <span>{{ details.options[selectedOption].from }}</span>
                <i class="fas fa-chevron-right mx-1 text-xs"></i>
                <span>{{ details.options[selectedOption].to }}</span>
              </div>
            </div>
            <div class="text-right">
              <p class="text-sm">约 {{ details.options[selectedOption].duration }}</p>
              <p class="font-medium text-red-600">{{ details.options[selectedOption].cost }}</p>
            </div>
          </div>
        </div>

        <!-- 餐饮详情 -->
        <div v-else-if="['早餐', '午餐', '晚餐'].includes(activity)">
          <div class="mb-2">
            <p class="font-medium">{{ details.options[selectedOption].recommendation }}</p>
            <p class="text-sm text-gray-600">{{ details.options[selectedOption].location }}</p>
            <div class="mt-2">
              <p class="text-sm mb-1">推荐菜品</p>
              <div class="flex flex-wrap gap-2">
                <span
                    v-for="(item, idx) in details.options[selectedOption].menu"
                    :key="idx"
                    class="bg-orange-50 text-orange-700 px-2 py-1 rounded text-xs"
                >
                  {{ item }}
                </span>
              </div>
            </div>
            <p class="mt-2 text-red-600 font-medium">{{ details.options[selectedOption].cost }}</p>
          </div>
        </div>

        <!-- 住宿详情 -->
        <div v-else-if="activity === '住宿'">
          <div class="mb-2">
            <div class="flex justify-between">
              <p class="font-medium">{{ details.options[selectedOption].hotel }}</p>
              <p class="text-sm bg-blue-50 text-blue-700 px-2 py-1 rounded">
                {{ details.options[selectedOption].rating }}
              </p>
            </div>
            <p class="text-red-600 font-medium mt-2">{{ details.options[selectedOption].price }}</p>
            <p class="text-sm text-gray-600 mt-1">
              <span class="font-medium">退房时间:</span> {{ details.options[selectedOption].checkout }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'ActivityDetails',
  props: {
    details: {
      type: Object,
      required: true
    },
    activity: {
      type: String,
      required: true
    }
  },
  setup() {
    const selectedOption = ref(0);

    return {
      selectedOption
    };
  }
};
</script>